.getElementById()或.querySelector()的方法來渲染...
<!-- 主頁面 -->
<main>
<section class="container">
<!-- 標題 -->
<div class="title">
<h2>Our Reviews</h2> <!-- 標題文字 -->
<div class="underline"></div> <!-- 裝飾底線 -->
</div>
<!-- Review -->
<article class="review">
<!-- 頭像 -->
<div class="img-container">
<img src="" id="person-img" alt="">
</div>
<!-- 姓名、職業、敘述 -->
<h4 id="author"></h4>
<p id="job"></p>
<p id="info"></p>
<!-- 前/後按鈕 -->
<div class="button-container">
<button class="prev-btn">
<!-- 前一位按鈕icon -->
<i class="fas fa-chevron-left"></i>
</button>
<button class="next-btn">
<!-- 後一位按鈕icon -->
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- 隨機按鈕 -->
<button class="random-btn">surprise me</button>
</article>
</section>
</main>
<!-- javascript -->
<script src="index.js"></script>
...
- 補充 : 按鈕的icon是使用了Font Awesome，在HTML的Header中有利用CDN引用icon圖示，Font Awesome的官網請見下方參考來源。
reviews中
const reviews = [....]; //省略其中資料
.getElementById()與.querySelector()的方法來抓取元素
const img = document.getElementById("person-img");//頭像
const author = document.getElementById("author");//姓名
const job = document.getElementById("job");//職業
const info = document.getElementById("info");//敘述
const prevBtn = document.querySelector(".prev-btn");//前一位按鈕
const nextBtn = document.querySelector(".next-btn");//後一位按鈕
const randomBtn = document.querySelector(".random-btn");//隨機按鈕
currentItem去紀錄目前的reviews中的索引值，進一步控制顯示的人物(預設為0)
let currentItem = 0;
currentItem找出對應的頭像、姓名、職業與敘述，並顯示出來
function showPerson(){
const item = reviews[currentItem];
img.src = item.img;
author.textContent = item.name;
job.textContent = item.job;
info.textContent = item.text;
};
window.addEventListener("DOMContentLoaded",function(){
showPerson(); //顯示review[0]的資訊
});
window : 代表了一整個包含DOM文件的視窗，其中也包含著document屬性，如下圖所示。
DOMContentLoaded : 在<head>...</head>裡面的<script>內去存取DOM的內容，實際上是無法的，因為此時 DOM結構尚未形成。所以必須透過DOMContentLoaded 來確保DOM結構被完整的讀取跟解析。
- 我們也可以透過
load事件，達到同樣的效果。但差別就在，load事件是在網頁「所有」資源都已經載入完成後才會觸發，而DOMContentLoaded事件是在DOM結構被完整的讀取跟解析後就會被觸發，不須等待外部資源讀取完成。換言之，load事件會在DOMContentLoaded之後才被觸發，而這兩個事件也都可以確保網頁結構載入完成。
nextBtn.addEventListener("click", function(){
currentItem++;
if(currentItem > reviews.length - 1){
currentItem = 0;
} //避免currentItem超出索引值
showPerson();
});
prevBtn.addEventListener("click", function(){
currentItem--;
if(currentItem < 0){
currentItem = reviews.length - 1;
}//同樣避免currentItem超出索引值
showPerson();
});
randomBtn.addEventListener('click',function(){
currentItem = Math.floor(Math.random() * reviews.length);
showPerson();
})
和上篇文章的隨機按鈕點擊事件相似
iThome鐵人賽
看影片追技術